import React from 'react'
import {Table, Typography, List, Row, Col, Button, Form, Input, Select, Drawer, Spin} from 'antd';
import IconFont from '../../util/autoIcon/article'
import IconFont2 from '../../util/autoIcon/file'
import IconFont6 from '../../util/autoIcon/folder'
import API from '../../api/api'
import './UserDirectoryPage.css'
import IconFont3 from "../../util/autoIcon/activity";
import {Link} from "react-router-dom";
import {config} from "../../util/config";
import judgeFileType from "../../service/judgeFileType";

const {Option} = Select;

export class UserDirectoryPage extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            spinning:false,
            //抽屉显示
            visible:false,
            //列表字段
            columns:[],
            //列表数据填充
            allData : [],
            //文件类型：file/article
            fileType:null,
            //file-d 的id
            moduleId:this.props.render.moduleId,
            //文件库的预显示部分
            fileData:this.props.render.fileArr,
            //文章库的预显示部分
            articleData:this.props.render.article,
            //总页数
            pageAllNum:null,
            //每页页数
            pageSize:10,
            // loading: false,
            // hasMore: true,
        };
    }

    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        //file-d 的id
        this.state.moduleId=nextProps.render.moduleId;
        //文件库的预显示部分
        this.state.fileData=nextProps.render.fileArr
    }

    formRef = React.createRef();

    //0代表接口为getSpecificFile，1代表getSearchFile
    interfaceType=0;


    showDrawer = (value) => {
        let columns = [];
        let data = null;
        if(value=="article"){
            columns = [
                {
                    title: '文章名',
                    dataIndex: 'name',
                    render: text => <a>{text}</a>
                },
                {
                    title: '描述',
                    dataIndex: 'desc'
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime'
                }
            ]
        }else {
            columns =  [
                {
                    title: '文件名',
                    dataIndex: 'name',
                    render: text => <a>{text}</a>
                },
                {
                    title: '描述',
                    dataIndex: 'desc'
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime'
                }
            ]
        }
        data = API.getSpecificFile({
            moduleId:this.state.moduleId,
            fileType:value
        })
        if(data == null){
            return;
        }
        console.log("pageSize",this.state.pageSize)
        this.setState({
            visible: true,
            fileType:value,
            columns: columns,
            allData:data.record,
            //总页数
            pageAllNum:data.pageAllNum
        });
        this.interfaceType=0;
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    onReset = () => {
        this.formRef.current.resetFields();
    };

    onFinish = (values) =>{
        let data =null;
        //  在modueId确定的module下查询
        values.moduleId=this.state.moduleId
        if(values.fileType==undefined){
            //默认值：this.state.fileType
            values.fileType=this.state.fileType
        }
        if(values.queryType==undefined){
            //默认值：ambiguous
            values.queryType="ambiguous"
        }
        data = API.getSearchFile(values)
        if(data == null){
            return;
        }
        this.setState({
            //在 选中的file-d下根据fileType,queryName,queryType搜索数据
            fileType:values.fileType,
            queryName:values.queryName,
            queryType:values.queryType,
            //把搜索数据传给allData
            allData:data.record,
            //总页数
            pageAllNum:data.pageAllNum
        })
        this.interfaceType=1;
    }

    // 更改每页页数
    getPageSize=(page,pageSize)=>{
        let data = [];
        //0代表调用getSpecificFile
        if(this.interfaceType==0){
            data = API.getSpecificFile({
                moduleId:this.state.moduleId,
                fileType:this.state.fileType,
                recordNum:pageSize,
            });
            this.setState({
                allData:data.record,
                pageAllNum:data.pageAllNum,
                pageSize:pageSize
            })
        }else {
            data = API.getSearchFile({
                moduleId:this.state.moduleId,
                fileType:this.state.fileType,
                queryName:this.state.queryName,
                queryType:this.state.queryType,
                recordNum:pageSize
            });
            this.setState({
                allData:data.record,
                pageAllNum:data.pageAllNum,
                pageSize:pageSize
            })
        }
        console.log("page,pageSize",page,pageSize)
    }
    // 切换页面
    getPageContent=(current,size)=>{
        let data = [];
        //0代表调用getSpecificFile
        if(this.interfaceType==0){
            data = API.getSpecificFile({
                moduleId:this.state.moduleId,
                fileType:this.state.fileType,
                recordNum:size,
                pageLocalNum:current
            });
            this.setState({
                allData:data.record,
                pageAllNum:data.pageAllNum,
            })
        }else {
            data = API.getSearchFile({
                moduleId:this.state.moduleId,
                fileType:this.state.fileType,
                queryName:this.state.queryName,
                queryType:this.state.queryType,
                recordNum:size,
                pageLocalNum:current
            });
            this.setState({
                allData:data.record,
                pageAllNum:data.pageAllNum,
            })
        }
        console.log("current,size",current,size)
    }

    marginRight = null

    setMarginRight=()=>{
        this.marginRight = "2rem"
        if(this.props.count==1){
            this.marginRight = "2rem"
        }
    }

    span = null
    titleSpan = null
    typeSpan = null

    setSpan=()=> {
        if(this.props.layoutType=="1"){
            this.titleSpan = 8
            this.typeSpan = 4
            this.span = 6
        }else if(this.props.width<34){
            this.span = 12
        }else if(this.props.width>=34 && this.props.width<58){
            this.span = 8
        }else if(this.props.width>=58){
            this.span = 6
        }
    }

    showFileType = ()=>{
        if(this.props.layoutType=="1"){
            return true
        }else {
            if(this.props.width>=58){
                return true
            }
        }

    }

    fileUpdateTimeSpan = null;

    showFileUpdateTime=()=>{
        if(this.props.layoutType=="1"){
            this.fileUpdateTimeSpan = "6"

        }else if(this.props.width >= 34){
            if(this.props.width>=34 && this.props.width<58){
                this.fileUpdateTimeSpan = "8"
            }else if(this.props.width>=58){
                this.fileUpdateTimeSpan = "6"
            }
        }
        return true
    }

    render() {
        this.setMarginRight();
        this.setSpan();
        return(
            <div  className="preview-resource" style={{fontSize:"1.5rem"}}>
                <Spin spinning={this.state.spinning}>
                    <Typography.Text>
                        <p style={{fontSize:"1.2rem",color:"#001529",marginBottom:"0.5rem",textAlign:"left"}}>
                            {this.props.render.moduleName}
                        </p>
                    </Typography.Text>
                    <List
                        size="small"
                        header={
                            <Row id="resourceRow" gutter={3}>
                                <Col span={this.span}>
                                    <span>
                                        {
                                            this.props.type=="article"?
                                                "标题"
                                                :
                                                "名称"
                                        }
                                    </span>
                                </Col>
                                {
                                    this.showFileType()
                                        ?
                                        <Col span={6} >
                                            <span >文件类型</span>
                                        </Col>
                                        :
                                        null
                                }
                                <Col span={this.span}>
                                    <span >修改人</span>
                                </Col>
                                {
                                    this.showFileUpdateTime()
                                        ?
                                        <Col span={this.fileUpdateTimeSpan}>
                                            <span >修改时间</span>
                                        </Col>
                                        :
                                        null
                                }
                            </Row>
                        }
                        footer={this.props.type=="file" ? <Link to={`/eip/table/file&${this.props.render.moduleId}`}>详情查看</Link> : <Link to={`/eip/table/article&${this.props.render.moduleId}`} >详情查看</Link>}
                        bordered
                        dataSource={this.state.fileData}
                        renderItem={item => (
                            <List.Item >
                                <Row id="resourceRow" gutter={3}>
                                    <Col span={this.span}>
                                        <Link onClick={_=>{
                                            if(item.FILE_TYPE=="file"){
                                                API.downloadFile(item.FILE_ID)
                                            }}}
                                              to={item.FILE_TYPE=="folder" ? `/eip/table/${item.FILE_TYPE}&${item.FILE_ID}` : (item.FILE_TYPE=="article"?`/eip/file/${item.FILE_TYPE}/${item.FILE_ID}`:null)}>
                                            {
                                                item.FILE_TYPE!="article"
                                                    ?
                                                    <span className="folder-ellipsis" title={item.FILE_NAME}>
                                                        {item.FILE_TYPE=="folder"
                                                            ?
                                                            <IconFont6 type="icon-huabanfuben"/>
                                                            :
                                                            (item.FILE_TYPE=="file"
                                                                    ?
                                                                    judgeFileType(item.FILE_NAME)// <IconFont type="icon-wendangwenjian"/>
                                                                    :
                                                                    null
                                                            )
                                                        }
                                                        &nbsp;&nbsp;
                                                        {item.FILE_NAME}
                                                    </span>
                                                    :
                                                    <span className="folder-ellipsis" title={item.FILE_NAME}>
                                                        {item.FILE_NAME}
                                                    </span>
                                            }
                                        </Link>
                                    </Col>
                                    {
                                        this.showFileType()
                                        ?
                                        <Col span={6} >
                                            <span className="folder-ellipsis" title={item.FILE_TYPE=="file"?config.file:item.FILE_TYPE=="folder"?config.file_d:item.FILE_TYPE=="article"?config.article:null}>
                                                {item.FILE_TYPE=="file"?config.file:item.FILE_TYPE=="folder"?config.file_d:item.FILE_TYPE=="article"?config.article:null}
                                            </span>
                                        </Col>
                                        :
                                        null
                                    }
                                    <Col span={this.span} style={{float:"right"}}>
                                        <span className="folder-ellipsis" title={item.UPDATE_USER}>{item.UPDATE_USER}</span>
                                    </Col>
                                    {
                                        this.showFileUpdateTime()
                                        ?
                                        <Col span={this.fileUpdateTimeSpan}>
                                            <span className="folder-ellipsis" title={item.UPDATE_DATE}>{item.UPDATE_DATE}</span>
                                        </Col>
                                        :
                                        null
                                    }
                                </Row>
                            </List.Item>
                        )}
                    />
                </Spin>
            </div>
        )
    }
}
